<template>
	<section>
		<h3 class="h3-component">
			<span class="h3">热门专题</span>
		</h3>
		<div class="subject-card-box">
			<div class="subject-card" v-for="item in res_data" :key="item.subject_id">
				<router-link :to="`/subject/${item.subject_id}?title=${item.subject_name}`">
					<div class="video-card-width">
						<div class="subject-img">
							<img :src="imgBaseUrl+item.pic" />
						</div>
					</div>
					<div class="subject-title">
						{{ item.subject_name }}
					</div>
				</router-link>
			</div>
		</div>
	</section>
</template>

<script>
import { subjectGetlist, updategood, imgBaseUrl } from '@/api';
export default {
	data() {
		return {
			// 界面展示
			res_data: [],
			imgBaseUrl,
			user: null,
		}
	},
	methods: {
		// 点赞 
		goodFn(item){
			if(item.goodcan){
				let para = {
					subject_id: item.subject_id
				}
				updategood(para).then(res=> {
					if(res.data){

						var index = this.res_data.indexOf(item);
						if (index !== -1) {
							this.res_data[index].good = 'icon-bg icon-good';
							this.res_data[index].good_num++;
							this.res_data[index].goodcan = false;
						}
					}else{
						this.$message.warning(res.msg);
					}
				})
			}
		},
		getList (){
			let para = {
				pagesize: 2 // 暂定
			}
			subjectGetlist(para).then(res => {
				if(res.data){
					let data = res.data;
					this.res_data = data
				}else{

				}
			})
		},
	},
	mounted() {
		this.getList();
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.subject-card {
	margin-bottom: 20px;
}
</style>
